<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
              <div class="title">Autocomplete</div>
              <div class="subnavbar">
                <form class="searchbar" id="searchbar-autocomplete">
                  <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                      <input type="search" placeholder="Search"><i class="searchbar-icon"></i><span class="input-clear-button"></span>
                    </div><span class="searchbar-disable-button">Cancel</span>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="page-content">
            <div class="block-title">Dropdown Autocomplete</div>
            <div class="list no-hairlines-md">
              <div class="block-header">Simple Dropdown Autocomplete</div>
              <ul>
                <li class="item-content item-input inline-label">
                  <div class="item-inner">
                    <div class="item-title item-label">Fruit</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown" type="text" placeholder="Fruit">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list no-hairlines-md">
              <div class="block-header">Dropdown With Input Expand</div>
              <ul>
                <li class="item-content item-input inline-label">
                  <div class="item-inner">
                    <div class="item-title item-label">Fruit</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown-expand" type="text" placeholder="Fruit">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list no-hairlines-md">
              <div class="block-header">Dropdown With All Values</div>
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Fruit</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown-all" type="text" placeholder="Fruit">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list no-hairlines-md">
              <div class="block-header">Dropdown With Placeholder</div>
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Fruit</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown-placeholder" type="text" placeholder="Fruit">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list no-hairlines-md">
              <div class="block-header">Dropdown With Typeahead</div>
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Fruit</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown-typeahead" type="text" placeholder="Fruit">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list no-hairlines-md">
              <div class="block-header">Dropdown With Ajax-Data</div>
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Language</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown-ajax" type="text" placeholder="Language">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list no-hairlines-md">
              <div class="block-header">Dropdown With Ajax-Data + Typeahead</div>
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Language</div>
                    <div class="item-input-wrap">
                      <input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="Language">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="block-title">Standalone Autocomplete</div>
            <div class="list">
              <div class="block-header">Simple Standalone Autocomplete</div>
              <ul>
                <li><a class="item-link item-content" href="#" id="autocomplete-standalone">
                    <input type="hidden">
                    <div class="item-inner">
                      <div class="item-title">Favorite Fruite</div>
                      <div class="item-after"></div>
                    </div></a></li>
              </ul>
            </div>
            <div class="list">
              <div class="block-header">Popup Autocomplete</div>
              <ul>
                <li><a class="item-link item-content" href="#" id="autocomplete-standalone-popup">
                    <input type="hidden">
                    <div class="item-inner">
                      <div class="item-title">Favorite Fruite</div>
                      <div class="item-after"></div>
                    </div></a></li>
              </ul>
            </div>
            <div class="list">
              <div class="block-header">Multiple Values</div>
              <ul>
                <li><a class="item-link item-content" href="#" id="autocomplete-standalone-multiple">
                    <input type="hidden">
                    <div class="item-inner">
                      <div class="item-title">Favorite Fruite</div>
                      <div class="item-after"></div>
                    </div></a></li>
              </ul>
            </div>
            <div class="list">
              <div class="block-header">With Ajax-Data</div>
              <ul>
                <li><a class="item-link item-content" href="#" id="autocomplete-standalone-ajax">
                    <input type="hidden">
                    <div class="item-inner">
                      <div class="item-title">Language</div>
                      <div class="item-after"></div>
                    </div></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var $$ = Dom7;
      
      // Fruits data demo array
      var fruits = ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' ');
      
      // Simple Dropdown
      var autocompleteDropdownSimple = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown',
        openIn: 'dropdown',
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });
      
      // Dropdown with input expand
      var autocompleteDropdownExpand = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown-expand',
        openIn: 'dropdown',
        expandInput: true, // expand input
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });
      
      // Dropdown with all values
      var autocompleteDropdownAll = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown-all',
        openIn: 'dropdown',
        source: function (query, render) {
          var results = [];
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });
      
      // Dropdown with placeholder
      var autocompleteDropdownPlaceholder = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown-placeholder',
        openIn: 'dropdown',
        dropdownPlaceholderText: 'Try to type "Apple"',
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });
      
      // Dropdown with typeahead
      var autocompleteDropdownTypeahead = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown-typeahead',
        openIn: 'dropdown',
        dropdownPlaceholderText: 'Try to type "Pineapple"',
        typeahead: true,
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      });
      
      // Dropdown with ajax data
      var autocompleteDropdownAjax = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown-ajax',
        openIn: 'dropdown',
        preloader: true, //enable preloader
        /* If we set valueProperty to "id" then input value on select will be set according to this property */
        valueProperty: 'name', //object's "value" property name
        textProperty: 'name', //object's "text" property name
        limit: 20, //limit to 20 results
        dropdownPlaceholderText: 'Try "JavaScript"',
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Show Preloader
          autocomplete.preloaderShow();
      
          // Do Ajax request to Autocomplete data
          app.request({
            url: 'autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
              query: query,
            },
            success: function (data) {
              // Find matched items
              for (var i = 0; i < data.length; i++) {
                if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
              }
              // Hide Preoloader
              autocomplete.preloaderHide();
              // Render items by passing array with result items
              render(results);
            }
          });
        }
      });
      
      // Dropdown with ajax data
      var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
        inputEl: '#autocomplete-dropdown-ajax-typeahead',
        openIn: 'dropdown',
        preloader: true, //enable preloader
        /* If we set valueProperty to "id" then input value on select will be set according to this property */
        valueProperty: 'name', //object's "value" property name
        textProperty: 'name', //object's "text" property name
        limit: 20, //limit to 20 results
        typeahead: true,
        dropdownPlaceholderText: 'Try "JavaScript"',
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Show Preloader
          autocomplete.preloaderShow();
      
          // Do Ajax request to Autocomplete data
          app.request({
            url: 'autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
              query: query,
            },
            success: function (data) {
              // Find matched items
              for (var i = 0; i < data.length; i++) {
                if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
              }
              // Hide Preoloader
              autocomplete.preloaderHide();
              // Render items by passing array with result items
              render(results);
            }
          });
        }
      });
      
      // Simple Standalone
      var autocompleteStandaloneSimple = app.autocomplete.create({
        openIn: 'page', //open in page
        openerEl: '#autocomplete-standalone', //link that opens autocomplete
        closeOnSelect: true, //go back after we select something
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        },
        on: {
          change: function (value) {
            console.log(value);
            // Add item text value to item-after
            $$('#autocomplete-standalone').find('.item-after').text(value[0]);
            // Add item value to input value
            $$('#autocomplete-standalone').find('input').val(value[0]);
          },
        },
      });
      
      // Standalone Popup
      var autocompleteStandalonePopup = app.autocomplete.create({
        openIn: 'popup', //open in page
        openerEl: '#autocomplete-standalone-popup', //link that opens autocomplete
        closeOnSelect: true, //go back after we select something
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        },
        on: {
          change: function (value) {
            // Add item text value to item-after
            $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
            // Add item value to input value
            $$('#autocomplete-standalone-popup').find('input').val(value[0]);
          },
        },
      });
      
      // Multiple Standalone
      var autocompleteStandaloneMultiple = app.autocomplete.create({
        openIn: 'page', //open in page
        openerEl: '#autocomplete-standalone-multiple', //link that opens autocomplete
        multiple: true, //allow multiple values
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        },
        on: {
          change: function (value) {
            // Add item text value to item-after
            $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
            // Add item value to input value
            $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
          }
        }
      });
      
      // Standalone With Ajax
      var autocompleteStandaloneAjax = app.autocomplete.create({
        openIn: 'page', //open in page
        openerEl: '#autocomplete-standalone-ajax', //link that opens autocomplete
        multiple: true, //allow multiple values
        valueProperty: 'id', //object's "value" property name
        textProperty: 'name', //object's "text" property name
        limit: 50,
        preloader: true, //enable preloader
        source: function (query, render) {
          var autocomplete = this;
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Show Preloader
          autocomplete.preloaderShow();
          // Do Ajax request to Autocomplete data
          app.request({
            url: 'autocomplete-languages.json',
            method: 'GET',
            dataType: 'json',
            //send "query" to server. Useful in case you generate response dynamically
            data: {
              query: query
            },
            success: function (data) {
              // Find matched items
              for (var i = 0; i < data.length; i++) {
                if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
              }
              // Hide Preoloader
              autocomplete.preloaderHide();
              // Render items by passing array with result items
              render(results);
            }
          });
        },
        on: {
          change: function (value) {
            var itemText = [],
                inputValue = [];
            for (var i = 0; i < value.length; i++) {
              itemText.push(value[i].name);
              inputValue.push(value[i].id);
            }
            // Add item text value to item-after
            $$('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
            // Add item value to input value
            $$('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
          },
        },
      });
      
      // Searchbar Autocomplete
      var searchbar = app.searchbar.create({
        el: '#searchbar-autocomplete',
        customSearch: true,
        on: {
          search: function (query) {
            console.log(query);
          }
        }
      });
      var autocompleteSearchbar = app.autocomplete.create({
        openIn: 'dropdown',
        inputEl: '#searchbar-autocomplete input[type="search"]',
        dropdownPlaceholderText: 'Type "Apple"',
        source: function (query, render) {
          var results = [];
          if (query.length === 0) {
            render(results);
            return;
          }
          // Find matched items
          for (var i = 0; i < fruits.length; i++) {
            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
          }
          // Render items by passing array with result items
          render(results);
        }
      })
    </script>
  </body>
</html>